<template>
  <!--
 * @FileDescription: 未归，晚归，未离开人数
 * @author Sun Yan
 * @Date $ 
-->
  <div class="academy-period-state-container">
    <module-card-title title="未归，晚归，未离开人数" use-time :on-change="onChangeTime">
      <div ref="echartsBox" style="width: 100%;height: 270px"></div>
    </module-card-title>
  </div>
</template>
<script>


import {throttle} from "@u";

/**
 * @description: 方法描述
 * @param {参数类型} 参数名称
 * @param {参数类型} 参数名称
 * @return void
 */


export default {
  name: "academy-period-state",

  props: {
    options: {
      type: Object,
      default: function () {
        return {
          color: ['#f7d673', '#ecfa79', '#48b87f', '#007aff', '#00ffff'],

          // title: {
          //   text: '折线图堆叠',
          //   show: false,
          // },
          // tooltip: {
          //              extraCssText: 'z-index: 2',

          //   trigger: 'axis'
          // },
          legend: {
            data: ['未归', '晚归', '未离开', '三日未归', '七日未归'],
            top: 5,
            right: 0,
            itemHeight: 9,//改变圆圈大小
            icon: "circle",
            textStyle: {
              color: '#FFF'  // 图例文字颜色
            }
          },
          grid: {
            show: true,
            right: 20,
            left: 40,
            top: 50,
            bottom: 50,
            borderWidth:'0'
            // containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            extraCssText: 'z-index: 2',

            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
              },
              crossStyle: {
                color: '#fff'
              }
            }
          },


          itemStyle: {
            emphasis: {
              shadowBlur: 200,
              shadowColor: "rgba(0,0,0,0.8)"
            }
          },


          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00'],

            itemStyle: {
              color: "red"
            },
            //轴文字标签
            axisLabel: {
              interval: 0,
              rotate: 50,
              show: true,
              textStyle: {
                color: '#c2beb8',
              }
            },

            nameTextStyle: {
              color: '#B0CEFC',
              padding: 10
            },

            axisLine: {
              show: false
            },

            splitLine: {
              show: true,
              lineStyle: {
                color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
                width: 1,
                type: 'solid'
              }
            },

          },

          yAxis: {
            axisLabel: {
              interval: 0,
              // rotate: 50,
              show: true,
              textStyle: {
                color: '#c2beb8',
              }
            },
            //网格样式
            splitLine: {
              // show: false,
              lineStyle: {
                color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
                width: 1,
                type: 'solid'
              }
            },

            // splitLine: {
            //   show: true,
            //   lineStyle:{
            //     // type:'dashed',
            //     color: '#f1f1f1',
            //     width: .5
            //   }
            // },
            type: 'value',
            scale: true, // 显示配置 起始最小数  最大
          },



          series: [
            {
              name: '未归',
              type: 'line',
              stack: '总量',
              symbol: 'circle',
              data: [120, 132, 101, 134, 90, 230, 210],
              itemStyle: {
                normal: {
                  color: '#048bee',
                  lineStyle: {
                    itemWidth: 5,
                    itemHeight: 5,
                    color: '#52ffff',
                    width: 1, //调整 线条的宽度  5已经很宽啦
                  },
                }
              },
            },
            {
              name: '晚归',
              type: 'line',
              stack: '总量',
              data: [220, 11, 1111, 234, 290, 330, 310],
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1, //调整 线条的宽度  5已经很宽啦
                  }
                }
              },
            },
            {
              name: '未离开',
              type: 'line',
              stack: '总量',
              data: [150, 222, 201, 154, 190, 330, 410],
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1, //调整 线条的宽度  5已经很宽啦
                  }
                }
              },
            },
            {
              name: '三日未归',
              type: 'line',
              stack: '总量',
              data: [320, 332, 301, 334, 390, 330, 320],
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1, //调整 线条的宽度  5已经很宽啦
                  }
                }
              },
            },
            {
              name: '七日未归',
              type: 'line',
              stack: '总量',
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1, //调整 线条的宽度  5已经很宽啦
                  }
                }
              },
            }
          ]
        };
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    options: {
      immediate: true,
      handler: function () {
        this.$nextTick(this.setEchartData());
      }
    }
  },

  created() {
    window.addEventListener("resize", this.mianResize)
  },

  methods: {
    onChangeTime(e) {
      console.log(e)
    },
    mianResize: throttle(function () {
      this.$nextTick(_ => {
        const $el = this.$refs.echartsBox || {};
        if ($el.clientHeight === undefined || $el.clientWidth === undefined) return;
        this.chart && this.chart.resize({
          height: `${$el.clientHeight}px`,
          width: `${$el.clientWidth}px`
        });
      })
    }),

    //echart options 数据 完毕调用
    setEchartData() {
      this.$nextTick(_=> {
        const chartDom = this.$refs.echartsBox || {};
        if (this.chart === null) {
          this.chart = echarts.init(chartDom)
          this.chart.setOption(this.options)
        } else {
          this.chart.clear();
          this.chart.setOption(this.options)
        }
      })

    },
  }

}
</script>

<style scoped>

</style>